<template>
    <div class="plugin-class">
        <Tabs :value="activeName" v-if="pluginList && pluginList.length > 0">
            <TabPane v-for="(plug, index) in pluginList" :key="plug.id" :label="plug.groupName" :name="plug.code">
                <component :is="plug.code.slice(0, 1).toUpperCase() + plug.code.slice(1)" :ref="plug.code" :tempApp="app" style="margin-top: 16px"></component>
                <div style="text-align: center; margin-top: 16px">
                    <Button type="primary" @click="save(plug, index)">save</Button>
                </div>
            </TabPane>
        </Tabs>
        <div class="append-button">
            <Dropdown @on-click="configEdit">
                <Button type="primary">
                    插件管理
                    <Icon type="md-menu"></Icon>
                </Button>
                <DropdownMenu slot="list" style="width: 160px">
                    <DropdownItem v-for="(item, index) in config" :key="item.code" :name="index" style="display: flex;justify-content: space-between">
                        {{item.name}}
                        <Icon v-show="item.active" type="md-checkmark" color="#19be6b" size="16" style="vertical-align: sub;"/>
                    </DropdownItem>
                </DropdownMenu>
            </Dropdown>
        </div>
    </div>
</template>

<script>
    import plugins from '../step/plugins/plugins';
    export default {
        data() {
            return {
                id: this.$route.params.id,
                pluginList: [],
                config: plugins.data,
                activeName: '',
                app: {
                    appInfo: null
                }
            }
        },
        components:{
            ...plugins.components
        },
        created(){
            this.$axios.get('/mdo/api/v1/appInfo/' + this.id).then(res => {
                this.app.appInfo = res.data;
                this.$axios.post('/mdo/api/v1/appConfig/pages', {
                    filters: [{
                        field: 'appId',
                        operator: 'EQ',
                        value: this.id
                    }]
                }).then(res2 => {
                    this.pluginList = res2.data.list;
                    if (res2.data.list && res2.data.list.length > 0) {
                        this.activeName = res2.data.list[0].code;
                        this.$nextTick(()=>{
                            this.pluginList.forEach(item => {
                                this.$refs[item.code][0].initData(item.config?JSON.parse(item.config):null);
                                this.config.forEach(con => {
                                   if (con.code === item.code) {
                                       con.active = true;
                                   } else {
                                       con.active = false;
                                   }
                                });
                            });
                        });
                    } else {
                        this.config.forEach(con => {
                            con.active = false;
                        });
                    }
                });
            });
        },
        methods:{
            save(plug, index) {
                debugger
                this.$refs[plug.code][0].getData().then(data => {
                    data.appId = this.id;
                    if (plug.id) {
                        this.$axios.put('/mdo/api/v1/appConfig/' + plug.id, data).then(res => {
                            this.pluginList.splice(index, 1 ,res.data);
                            this.$Message.success('update success!');
                        });
                    } else {
                        this.$axios.post('/mdo/api/v1/appConfig', data).then(res=>{
                            this.pluginList.splice(index, 1 ,res.data);
                            this.$Message.success('save success!');
                            this.$nextTick(()=>{
                                this.$refs[plug.code][0].initData(res.data.config?JSON.parse(res.data.config):null);
                            });
                        })
                    }
                })
            },
            configEdit(index) {
                this.config[index].active = !this.config[index].active;
                if (this.config[index].active) {
                    this.pluginList.push({
                        code: this.config[index].code,
                        groupName: this.config[index].name,
                        appId: this.id
                    });
                    this.activeName = this.config[index].code;
                } else {
                    for (let i = this.pluginList.length - 1; i > -1; i--) {
                        if (this.pluginList[i].code === this.config[index].code) {
                            if (i > 0) {
                                this.activeName = this.pluginList[i-1].code;
                            } else if (i === 0 && this.pluginList.length > 1) {
                                this.activeName = this.pluginList[i + 1].code;
                            }
                            if (this.pluginList[i].id) {
                                this.$Modal.confirm({
                                    title: '确认',
                                    content: '确定删除该插件吗？',
                                    onOk: () => {
                                        this.$axios.delete('/mdo/api/v1/appConfig/' + this.pluginList[i].id).then(res => {
                                            if (res.status === 200) {
                                                this.pluginList.splice(i, 1);
                                            }
                                        });
                                    },
                                    onCancel: () => {
                                       return false;
                                    }
                                });
                            } else {
                                this.pluginList.splice(i, 1);
                            }
                        }
                    }
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    .plugin-class{

        position: relative;
        min-height: 350px;

        .append-button{
            position: absolute;
            top: 8px;
            right: 0;
        }
    }

</style>